
import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaProgress, WeaSteps } from "ecCom";
import { WeaTableNew } from "comsMobx";
const WeaTable = WeaTableNew.WeaTable;
import { Timeline, Icon, Button } from 'antd';
const Step = WeaSteps.Step;
import './style/index.css';

@inject('agreedBillStore')
@observer
export default class AgreedBillGroup extends React.Component {
	constructor(props) {
		super(props);
		const item = props.item||{};
		this.state = {
			showRecord: false,
			showEdit: false,
			item: item
		}
	}

	showOperate=(showEdit)=>{
		this.setState({showEdit:showEdit});
	}
	render() {
		const {payType,payTypeName} = this.props.agreedBillStore;
		const { showRecord,showEdit,item} = this.state;
		const {payData=[]} = item;
		const hasRecords = (payData.length>0);

		return (
			<div>
				<Timeline.Item key={item.id} color={payType==="1"?"#CD3F3D":"#028102"}
					dot={<Icon type="pay-circle" style={{ fontSize: '23px', color: (payType==="1"?"#CD3F3D":"#028102") }} />}
				>
					<table className={'wea-contract-synergy-agreed-tb'} onMouseOver={(bool)=>this.showOperate(true)} onMouseOut={(bool)=>this.showOperate(false)}>
						<tr>
							<td className={"item"}>{payTypeName}款条件:</td>
							<td>
								{item.condition||""}
							</td>
						</tr>
						<tr>
							<td className={"item"}>应{payTypeName}日期:</td>
							<td>{item.plan_date||""}</td>
						</tr>
						<tr>
							<td className={"item"}>应{payTypeName}比例:</td>
							<td>{item.progress||0}%</td>
						</tr>
						<tr>
							<td className={"item"}>应{payTypeName}金额:</td>
							<td>
								{item.plan_count||0}
								<div className={"operate"}>
									{hasRecords?<div className={"record"} onClick={() => this.setState({ showRecord: !showRecord })}>收款记录<span className={showRecord ? "icon-coms-down2" : "icon-coms-up2"} style={{ paddingLeft: '10px',cursor:'pointer' }} /></div>:null}
								</div>
							</td>
						</tr>
						{showRecord? <tr>
							<td colspan="2">
								<WeaSteps className="step" size="small" current={4} >
									{payData.map((step)=>{
										return (<Step title={step.pay_date} description={"￥"+step.pay_count} />);
									})}
								</WeaSteps>
							</td>
						</tr> : null}
					</table>
				</Timeline.Item>
			</div>
		)
	}
}